<!DOCTYPE html>
<html>

<head lang="en">
    <title>找游记</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyComment.css"/>
    <link rel="stylesheet" href="/css/newsContent.css">
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>

    <script>
        $(function () {
            //获取当前登录的用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            var currentPage = 1;
            //总页数  用来判断是否是最后一页
            var pages ;
            //[] 数组,一个容器 将每次拉倒底部查询的每页数据 数组都存放在里面
            var travelData = [];
            //变量表示查询状态 当前页是否已经在查询中 如果是 则不再查询,避免ajax的异步请求发送重复
            var loading = false;
            //获取页面带过来的参数
            var params = getParams();
            if (params.id) {
                $.get('/travels/' + params.id, {currentPage: currentPage}, function (data) {
                    $(".container").renderValues(data, {
                        'userId': function (item, value) {
                            var url = $(item).data('url');
                            $(item).attr('href', url + value);
                        }
                    });

                    //给图片绑定事件
                    $(".comment-img img").click(function () {
                        var url = $(this).attr("src");
                        $(document).dialog({
                            titleShow: false,
                            overlayClose: true,
                            content: '<img src="' + url + '" width="100%"/>'
                        });
                    });
                });

            }

            function query() {
                //如果当前为正在查询 则说明ajax已经发送 不需要重复发送
                if (loading) {
                    return;
                }
                //每次在发送ajax前,将查询状态改为正在查询,
                loading = true;
                $.get('/comments/strategy', {type: 2, answer_id: params.id, currentPage: currentPage,pageSize:4}, function (data) {
                    //设置评论数量
                    $(".spanCommentNum").html(data.total);
                    //将查询出来的需要的数据的数组放到容器中
                    $.merge(travelData, data.list);

                    //渲染数据
                    $("#display").renderValues({list: travelData}, {
                        'getReplyId': function (item, value) {
                            $(item).attr('data-id', value);
                        },
                        getId: function (item, value) {
                            $(item).attr("data-id", value);
                        },
                        'getCommentId': function (item, value) {
                            $(item).attr('data-id', value);
                        },

                        'getTargetId': function (item, value) {
                            $(item).attr('data-id', value);
                        }
                    });
                    //评论的点击
                    $(".CommentBtn").click(function () {
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            $("#CommentModal input").val("")
                            $("#CommentModal").modal('show')
                        }
                    });
                    //点击回复的点击
                    $(".reply_Bth").click(function () {
                        $("#ReplyModal input").val("")
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        } else {
                            //获取当前comment的id
                            var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                            console.log(commentId);
                            //设置回复人的id为当前登录的用户
                            $("#replyUserId").val(user.id);
                            //设置评论id
                            $("#commentId").val(commentId);
                            //设置目标人的id
                            var targetId = $(this).data("id");
                            console.log(targetId);
                            $("#targetUserId").val(targetId);


                            $("#ReplyModal").modal('show')
                        }
                    });
                    //点击回复人的昵称显示模态框进行回复
                    $(".replyUserNickName").click(function () {
                        $("#ReplyModal input").val("")
                        //如果登录了可以回复
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        }
                        console.log($(this));
                        //获取当前comment的id
                        var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                        console.log(commentId);
                        //设置回复人的id为当前登录的用户
                        $("#replyUserId").val(user.id);
                        //设置评论id
                        $("#commentId").val(commentId);
                        //设置目标人的id
                        var targetId = $(this).closest(".replydiv").find("a.replyUserNickName").data("id");
                        console.log(targetId);
                        $("#targetUserId").val(targetId);


                        $("#ReplyModal").modal("show");
                    });
                    //点击被回复人的昵称显示模态框进行回复
                    $(".targetUserNickName").click(function () {
                        $("#ReplyModal input").val("")
                        //如果登录了可以回复
                        if (!user) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: false,
                                content: '请登录',
                                onClickConfirmBtn: function () {
                                    location.href = "/login.html"
                                }
                            })
                        }
                        //获取当前comment的id
                        var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                        console.log(commentId);
                        //设置回复人的id为当前登录的用户
                        $("#replyUserId").val(user.id);
                        //设置评论id
                        $("#commentId").val(commentId);
                        //设置目标人的id
                        var targetId = $(this).data("id");
                        console.log(targetId);
                        $("#targetUserId").val(targetId);


                        $("#ReplyModal").modal("show");
                    });

                    //当前页加1 下次将查询第二页数据
                    currentPage += 1;
                    //总页数
                    pages = data.pages;
                    //查询请求结果,则将查询状态改为 不在查询中
                    loading = false;
                })
            }

            //默认的第一次查第一页数据
            query();

            //给window绑定滚动事件,当window滚动式,调用其中的函数
            $(window).scroll(function () {
                //判断是否滚动到底部(屏幕高度+HTML滚动超出顶部的高度>=HTML文档的高度)
                if ($(window).height() + $(document).scrollTop() + 1 >= $(document).height()) {
                    //滚动到当前文档底部,并且是否还有页数可以显示 有则继续查询出来显示
                    if (currentPage <= pages) {
                        query();
                        //滚动到底部时,如果此时还有页数 弹出加载中信息
                        $(document).dialog({
                            type: 'notice',
                            infoText: '加载中',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    } else {
                        //滚动到当前文档底部,如果已经是最后一页 则弹出已经到底
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }

            });

            $(".strategyDetailSubmitBtn").click(function () {
                var content = $("#commentForm input[name='content']").val();
                $.post('/comments/strategy', {
                    'commenter.id': user.id,
                    answer_id: params.id,
                    type: 2,
                    content: content
                }, function (data) {
                    location.reload();
                });

            });

            $(".replyFormSubmitBtn").click(function () {
                $("#replyForm").ajaxSubmit(function (data) {
                    if (data.success) {
                        $(document).dialog({
                            type: 'alert',
                            closeBtnShow: false,
                            content: '评论成功',
                        })
                        setTimeout(function () {
                            location.reload();
                        }, 500);
                    }
                })

            });

        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>点评详情</span>
        </div>
        <div class="col"></div>
    </div>
</div>

<div class="comment">
    <div class="container ">
        <div class="row">
            <div class="col-2 comment-head">
                <a data-url="/userProfiles.html?id=" render-key="author.id"
                   render-fun="userId">
                    <img class="rounded-circle" render-src="author.headImgUrl">
                </a>
                <!--<button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>-->
            </div>
            <div class="col">
                <a style="color: gray()" render-html="author.nickName">阿强</a>
                <span class="comment-date" render-html="releaseTime">2018-07-11</span>
                <div class="comment-content">
                    <p render-html="title">骑了个单车到沙面，春风把从上下九和宝华路带来的燥热吹散。沙面临江，下午的时光让这富有异国风情的公园显得更加宁静惬意，哪怕只是空手来散散步都是好的。</p>
                </div>
                <ul class="comment-img">
                    <li>
                        <img render-src="coverUrl">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="count d-flex justify-content-between">
        <div class="p-2">评论<span class="spanCommentNum">0</span></div>
    </div>
</div>

<!--评论-->
<div id="display" class="container">
    <div render-loop="list"><!--快来发表你的评论吧-->
        <div class="row">
            <a data-href="/userProfiles.html?id=">
                <img class="rounded-circle" render-src="list.commenter.headImgUrl" style="width: 40px">
            </a>
            <div class="col mysss">
                <a render-key="list.id" render-fun="getCommentId" class="listComment">
                </a>
                <a style="font-size: 20px;color: #545b62" class="replyBtn" render-html="list.commenter.nickName"></a>
                <span class="comment-date" render-html="list.createtime"></span>
                <a class="reply_Bth oneReplyBtn" render-key="list.commenter.id" render-fun="getId">
                    回复
                </a>
                <p render-html="list.content"></p>

                <!--二级评论-->
                <div id="commentReply">
                    <div render-loop="list.commentOfAlls">
                        <div class="replydiv">
                            <a style="color: #545b62" class="replyUserNickName"
                               render-html="list.commentOfAlls.replyer.nickName"
                               render-key="list.commentOfAlls.replyer.id" render-fun="getReplyId">
                            </a>
                            回复:
                            <a style="color: #545b62" class="byreplyerrNickName targetUserNickName"
                               render-html="list.commentOfAlls.byreplyerr.nickName"
                               render-key="list.commentOfAlls.byreplyerr.id" render-fun="getTargetId">
                            </a>
                            <span class="comment-date" render-html="list.commentOfAlls.createtime"></span><br>
                            <span name="content" render-html="list.commentOfAlls.content"></span>
                        </div>
                    </div>
                </div>
                <hr/>
            </div>
        </div>
    </div>
</div>

<div class="operation">
    <div class="d-flex justify-content-between CommentBtn">
        <div class="p-2"><i class="fa fa-commenting-o"></i> 添加你的评论</div>
    </div>
</div>

<!--评论模态框-->
<div class="modal fade" id="CommentModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">评论</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="" method="post" id="commentForm">
                    <input type="hidden" name="commenter.id"/><!--评论人Id-->
                    <input type="hidden" name="answer_id"/><!--评论的文章id-->
                    <input type="hidden" name="type"/><!--评论的类型-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary strategyDetailSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

<!--回复模态框-->
<div class="modal fade" id="ReplyModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">回复</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/comments/strategy/reply" method="post" id="replyForm">
                    <input type="hidden" id="replyUserId" name="replyer.id"/><!--评论人Id-->
                    <input type="hidden" id="targetUserId" name="byreplyerr.id"/><!--被评论人Id-->
                    <input type="hidden" id="commentId" name="comment_id"/><!--这条评论的id-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary replyFormSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

</body>

</html>